<template>
	<view class="w-f box"  style="height: 840rpx;">
		<view class="f ai-c pt-64 fs-36 fw-600 text-color4 jc-c">选择<view class="text-color ml-20 mr-20">{{name}}</view>
			的自诊部位</view>
		<view class="w-f h-440 mt-74 body">
			<image
				:src="getBaseUrl() + '/admin-api/system/file/19/get/0bb523a478c4ada15f240b35cec6d084f2c80680cd04428859b3c21c9b11150d.png'"
				class="w-f h-440">
			</image>
			<!-- 五官 -->
			<div class="wg">
				<div class="w-118 h-56 fs-26 text-color4 b-56 border f ai-c jc-c" @click="toClass('wg')">五官</div>
				<div class="xian"></div>
			</div>
			<!-- 消化道 -->
			<div class="xhd">
				<div class="w-118 h-56 fs-26 text-color4 b-56 border f ai-c jc-c" @click="toClass('xhd')">消化道</div>
				<div class="xian"></div>
			</div>
			<!-- 泌尿道 -->
			<div class="mld">
				<div class="w-118 h-56 fs-26 text-color4 b-56 border f ai-c jc-c" @click="toClass('mld')">泌尿道</div>
				<div class="xian"></div>
			</div>
			<!-- 生殖系统 -->
			<div class="szxt">
				<div class="w-144 h-56 fs-26 text-color4 b-56 border f ai-c jc-c" @click="toClass('wgszxt')">生殖系统</div>
			</div>
			<!-- 皮肤 -->
			<div class="pf">
				<div class="w-118 h-56 fs-26 text-color4 b-56 border f ai-c jc-c" @click="toClass('pf')">皮肤</div>
			</div>
			<!-- 其他综合 -->
			<div class="qtzh">
				<div class="w-144 h-56 fs-26 text-color4 b-56 border f ai-c jc-c" @click="toClass('qtzh')">其他综合</div>
			</div>
			<!-- 四肢骨骼 -->
			<div class="szgg">
				<div class="w-144 h-56 fs-26 text-color4 b-56 border f ai-c jc-c" @click="toClass('szgg')">四肢骨骼</div>
				<div class="xian"></div>
			</div>
			<!-- 呼吸道 -->
			<div class="hxd">
				<div class="w-118 h-56 fs-26 text-color4 b-56 border f ai-c jc-c" @click="toClass('hxd')">呼吸道</div>
				<div class="xian"></div>
			</div>
		</view>
	</view>
	<view class="ph-20">
		<view class="b-24 list-Box ph-28 pv-28">
			<view class="f ai-c jc-s-b">
				<view class="fs-40 fw-600 text-color4">宠物常见问题</view>
				<view class="f ai-c">
					<image src="http://cwht.ricecs.cn/app/index/change.png" class="w-24 h-24 mr-8"></image>
					<view class="fs-24 text-color3" @click="toClass">换一下</view>
				</view>
			</view>
			<view class="f fc-w jc-s-b">
				<view class="f ai-c list mr-20 mt-20" v-for="(item, index) in listCat" :key="index"
					@click='toDetail(item)'>
					<view class="yuan w-24 h-24 b-24 mr-12 f ai-c jc-c">
						<view></view>
					</view>
					<view class="w-281 text-ellipsis-1 fs-28 text-color4">{{item.diagnosisResult}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { toRefs, watch, ref } from 'vue';
	import { categoryList, diseasePage } from '@/services/api/index/index';
	import { getBaseUrl } from '@/utils/env';
	const props = defineProps({
		name: {
			type: String,
		},
		petId: {
			type: Number
		}
	});
	const { name, petId } = toRefs(props);
	const listCat = ref<any[]>([]);
	watch(
		() => [name?.value],
		() => {
			getCategoryList();
		}
	);
	async function getCategoryList() {
		const res = await categoryList({ scope: 2, types: 0 });
		if (res.data.length > 0) {
			loadData(res.data[0].categoryCode)
		}
	}
	const toClass = () => {
		uni.navigateTo({
			url: '/pages_index/commonSymptom?petId=' + petId?.value,
		});
	};

	async function loadData(id : string) {
		let data = {
			firstCategoryCode: id
		}
		const res = await diseasePage(data)
		listCat.value = res.data.list
	}
	function toDetail(data : any) {
		uni.setStorageSync('disease', data)
		uni.navigateTo({
			url: `/pages_index/firstVisit?petId=${petId?.value}`,
		});
	}
	function getDataCat(data : any) {
		listCat.value = data;
	}

	defineExpose({ getDataCat });
</script>
<style lang="scss" scoped>
	.list-Box {
		background: #fff;
		position: relative;

		// top: -84rpx;
		.yuan {
			background: #fabb3c;
			position: relative;

			view {
				width: 10rpx;
				height: 10rpx;
				border-radius: 10rpx;
				background: #fff;
			}
		}

		.list:nth-child(2n) {
			margin-right: 0;
		}
	}

	.box {
		background-image: linear-gradient(180deg, #ffecc7 0%, #f5f5f5 100%);

		.body {
			position: relative;

			.hxd {
				position: absolute;
				left: 40rpx;
				bottom: 185rpx;

				.xian {
					border-top: 2rpx solid #fff;
					border-left: 2rpx solid #fff;
					padding: 0;
					height: 35rpx;
					width: 139rpx;
					position: absolute;
					top: -36rpx;
					left: 56rpx;
				}

				.xian::after {
					position: absolute;
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background: #fff;
					right: -7rpx;
					top: -7rpx;
					content: '';
				}
			}

			.szgg {
				position: absolute;
				left: 40rpx;
				bottom: 61rpx;

				.xian {
					border-top: 2rpx solid #fff;
					border-left: 2rpx solid #fff;
					padding: 0;
					height: 35rpx;
					width: 146rpx;
					position: absolute;
					top: -36rpx;
					left: 72rpx;
				}

				.xian::after {
					position: absolute;
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background: #fff;
					right: -7rpx;
					top: -7rpx;
					content: '';
				}
			}

			.qtzh {
				position: absolute;
				left: 212rpx;
				bottom: -56rpx;
			}

			.pf {
				position: absolute;
				right: 212rpx;
				bottom: -56rpx;
			}

			.szxt {
				position: absolute;
				right: 40rpx;
				bottom: 61rpx;
			}

			.mld {
				position: absolute;
				right: 40rpx;
				top: -26rpx;

				.xian {
					border-bottom: 2rpx solid #fff;
					border-right: 2rpx solid #fff;
					padding: 0;
					height: 166rpx;
					width: 95rpx;
					position: absolute;
					top: 56rpx;
					right: 58rpx;
				}

				.xian::after {
					position: absolute;
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background: #fff;
					left: -7rpx;
					bottom: -7rpx;
					content: '';
				}
			}

			.xhd {
				position: absolute;
				left: 410rpx;
				top: -26rpx;

				.xian {
					background: #fff;
					padding: 0;
					height: 149rpx;
					width: 1rpx;
					position: absolute;
					top: 56rpx;
					left: 58rpx;
				}
			}

			.wg {
				position: absolute;
				left: 50rpx;
				top: 14rpx;

				.xian {
					border-bottom: 2rpx solid #fff;
					border-left: 2rpx solid #fff;
					padding: 0;
					height: 54rpx;
					width: 79rpx;
					position: absolute;
					top: 56rpx;
					left: 58rpx;
				}
			}

			.xian::after {
				position: absolute;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: #fff;
				right: -7rpx;
				bottom: -7rpx;
				content: '';
			}

			.border {
				border: 1rpx solid #fabb3c;
				background: #fff;
			}
		}
	}
</style>